<template>
  <fks-dialog
    :visible.sync="show"
    @close="close"
    destroy-on-close
    width="640px"
  >
    <div slot="title">
      <template v-if="type == 'add' || type == 'dialogAdd'">
        <i class="fks-icon-plus" />
        <span>{{ LANG.ADD }}</span>
      </template>
      <template v-if="type == 'edit'">
        <i class="fks-icon-edit" />
        <span>{{ LANG.EDIT }}</span>
      </template>
      <template v-if="type == 'view'">
        <i class="fks-icon-view" />
        <span>{{ LANG.VIEW }}</span>
      </template>
    </div>
    <fks-form
      label-position="right"
      label-width="110px"
      :model="form"
      ref="form"
      :rules="rules"
      :disabled="type == 'view'"
    >
      <div class="step">
        <span style="margin-right: 8px">{{ LANG.FIRST_STEP }}</span
        ><span>{{ LANG.CREATE_METACODE }}</span>
      </div>
      <fks-form-item :label="LANG.TYPE" prop="type">
        <fks-select v-model="form.type">
          <fks-option
            v-for="item in metaCodeType"
            :key="item.code"
            :label="item[$lang]"
            :value="Number(item.code)"
          ></fks-option>
        </fks-select>
      </fks-form-item>
      <fks-form-item :label="LANG.NAME" prop="name">
        <fks-input
          v-model="form.name"
          maxlength="50"
          show-word-limit
          :placeholder="LANG.NAME_TIP"
        ></fks-input>
      </fks-form-item>
      <fks-form-item
        :label="LANG.DIGIT"
        v-if="form.type && form.type == 2"
        prop="digit"
      >
        <fks-input-number
          v-model="form.digit"
          controls-position="right"
          :min="1"
          :step="1"
          :max="9"
          :precision="0"
        ></fks-input-number>
        <span class="tip">{{ LANG.DIGIT_TIP }}</span>
      </fks-form-item>
      <fks-form-item
        :label="LANG.REMARK"
        style="margin-bottom: 0"
        v-if="form.type && form.type == 2"
      >
        <fks-input
          type="textarea"
          :placeholder="LANG.REMARK_TIP"
          v-model="form.remark"
          maxlength="255"
          show-word-limit
        ></fks-input>
      </fks-form-item>
      <fks-divider />
      <div class="step">
        <span style="margin-right: 8px">{{ LANG.SECOND_STEP }}</span
        ><span>{{ LANG.SET_DICTVALUE }}</span>
      </div>
      <fks-form-item
        prop="dictValue"
        :label="LANG.DICTVALUE"
        v-if="form.type != 2"
      >
        <fks-input
          v-model="form.dictValue"
          :placeholder="LANG.PLEASE_INPUT"
          maxlength="50"
          show-word-limit
        ></fks-input>
      </fks-form-item>
      <template v-if="form.type && form.type == 2">
        <div>
          <fks-form-item :label="LANG.INITIAL_VALUE" prop="initialValue">
            <fks-input-number
              :min="1"
              :step="1"
              :max="Math.pow(10, form.digit) - 1"
              :precision="0"
              v-model="form.initialValue"
              controls-position="right"
            ></fks-input-number>
          </fks-form-item>
          <fks-form-item :label="LANG.INCREMENT_VALUE" prop="incrementValue">
            <fks-input-number
              :step="1"
              :precision="0"
              :min="1"
              v-model="form.incrementValue"
              controls-position="right"
            ></fks-input-number>
          </fks-form-item>
          <fks-form-item :label="LANG.END_VALUE" prop="endValue">
            <fks-input-number
              :min="1"
              :max="maxEndValue"
              :step="1"
              :precision="0"
              v-model="form.endValue"
              controls-position="right"
            ></fks-input-number>
            <span class="tip">{{ LANG.END_VALUE_TIP }}</span>
          </fks-form-item>
        </div>
      </template>
      <fks-form-item :label="LANG.DICT_DESC" style="margin-bottom: 0">
        <fks-input
          type="textarea"
          :placeholder="LANG.REMARK_TIP"
          v-model="form.comment"
          maxlength="255"
          show-word-limit
        ></fks-input>
      </fks-form-item>
    </fks-form>
    <span slot="footer" class="dialog-footer" v-if="type != 'view'">
      <fks-button icon="fks-icon-check" type="primary" @click="submit">{{
        LANG.SAVE
      }}</fks-button>
    </span>
  </fks-dialog>
</template>
<script>
import { ENUM } from '@/store/State/stateTypes'
import { addCode, editCode, getDicValue } from '../api'
export default {
  name: 'AddCode',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    codeData: {
      type: Object
    }
  },
  data() {
    return {
      show: this.visible,
      form: {
        autoed: true,
        digitFixed: true,
        type: 1,
        name: '',
        digit: null,
        remark: '',
        initialValue: null,
        incrementValue: null,
        endValue: null,
        dictValue: null,
        comment: ''
      }
    }
  },
  computed: {
    metaCodeType() {
      return this.$store.state[ENUM].metaCodeType || []
    },
    maxEndValue() {
      return (
        Math.trunc(
          (Math.pow(10, this.form.digit) - 1 - this.form.initialValue) /
            this.form.incrementValue
        ) *
          this.form.incrementValue +
        this.form.initialValue
      )
    },
    rules() {
      return {
        type: [
          {
            required: true,
            message: this.LANG.CODETYPE_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        name: [
          {
            required: true,
            message: this.LANG.CODENAME_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        digit: [
          {
            required: true,
            message: this.LANG.DIGIT_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        dictValue: [
          {
            required: true,
            message: this.LANG.DICTVALUE_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        initialValue: [
          {
            required: true,
            message: this.LANG.INITIAL_VALUE_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        incrementValue: [
          {
            required: true,
            message: this.LANG.INCREMENT_VALUE_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        endValue: [
          {
            required: true,
            message: this.LANG.END_VALUE_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.show = val
    },
    codeData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (this.type == 'edit' || this.type == 'view') {
          this.form = Object.assign(this.form, val)
          this.getDicValue()
        }
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
      this.$emit('closeAddCode')
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.type == 2) {
            this.form.dictValue = null
            if (
              this.form.endValue <
              this.form.initialValue + this.form.incrementValue
            ) {
              return this.$message.warning(this.LANG.FORMULA_TIP)
            }
          } else {
            this.form.digit = this.form.dictValue.length
            this.form.remark = ''
            this.form.initialValue = null
            this.form.incrementValue = null
            this.form.endValue = null
          }
          if (this.type == 'edit') {
            this.handleEdit()
          } else {
            this.handleAdd()
          }
        }
      })
    },
    handleAdd() {
      addCode(this.form)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.ADD_SUCCESS)
            this.close()
          }
        })
        .catch((err) => {})
    },
    handleEdit() {
      editCode(this.form)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.EDIT_SUCCESSS)
            this.close()
          }
        })
        .catch((err) => {})
    },
    getDicValue() {
      getDicValue({ metaCodeId: this.codeData.id, type: this.codeData.type })
        .then((res) => {
          if (res.status) {
            this.form.dictValue = res.data.value
            this.form.comment = res.data.comment
            this.form.initialValue = res.data.initialValue
            this.form.incrementValue = res.data.incrementValue
            this.form.endValue = res.data.endValue
          }
        })
        .catch((err) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog {
  .step {
    padding-left: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #000000;
    line-height: 19px;
  }
  .fks-form {
    .fks-select {
      width: 100%;
    }
  }
  .fks-textarea__inner {
    height: 80px;
  }
  .fks-input-number {
    .fks-input__inner {
      text-align: left;
    }
  }
  .tip {
    font-size: 12px;
    color: #adadad;
    line-height: 16px;
    margin-left: 12px;
  }
}
</style>